<template>
  <!-- 答卷列表头部：面包屑 + 标签页 -->
  <div style="background:#fff;padding:16px 16px 0 16px;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>成绩管理</el-breadcrumb-item>
      <el-breadcrumb-item>答卷列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标签页 -->
    <div style="margin-top:12px;">
      <el-tag
        type="success"
        closable
        disable-transitions
        style="margin-right:8px;"
      >
        ● 答卷列表
      </el-tag>
    </div>
  </div>

    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="学科：">
        <el-select v-model="query.subject" placeholder="请选择" @change="fetchData">
          <el-option label="语文" value="chinese"></el-option>
          <el-option label="数学" value="math"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="Id" width="50"></el-table-column>
      <el-table-column prop="examName" label="试卷名称" width="180"></el-table-column>
      <el-table-column prop="username" label="用户名称" width="180"></el-table-column>
      <el-table-column prop="score" label="得分" width="180"></el-table-column>
      <el-table-column prop="correctQuestions" label="题目对错" width="180"></el-table-column>
      <el-table-column prop="duration" label="耗时" width="180"></el-table-column>
      <el-table-column prop="submitTime" label="提交时间" width="250"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="query.pageSize"
        :current-page="query.pageIndex"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

interface ExamPaper {
  id: number;
  examName: string;
  username: string;
  score: string;
  correctQuestions: string;
  duration: string;
  submitTime: string;
}

const query = ref({
  subject: '',
  pageIndex: 1,
  pageSize: 10
})

const tableData = ref<ExamPaper[]>([])
const total = ref(0)


// 模拟数据获取函数
const fetchData = async () => {
  try {
    const res = await getExamPapers(query.value)
    tableData.value = res.data.list
    total.value = res.data.total
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

// 模拟API请求，返回不同学科的数据
interface GetExamPapersResult {
  data: {
    list: ExamPaper[];
    total: number;
  };
}

const getExamPapers = async (params: any): Promise<GetExamPapersResult> => {
  // 模拟的数据
  const mockData = { 
    chinese: Array.from({ length: 17 }, (_, i) => ({
      id: i + 1,
      examName: `高三语文固定试卷${(i % 2) + 1}`,
      username: ['student', 'zoudexiang', 'anshubin112321321', 'wangrui'][i % 4],
      score: `${Math.floor(Math.random() * 3) * 10}/${(i % 2) ? 20 : 10}`,
      correctQuestions: `${Math.floor(Math.random() * 3)}/${(i % 2) ? 2 : 1}`,
      duration: `${Math.floor(Math.random() * 40) + 1}秒`,
      submitTime: new Date(Date.now() - i * 86400000).toLocaleString()
    })),
    math: Array.from({ length: 8 }, (_, i) => ({
      id: i + 1,
      examName: `高三数学固定试卷${(i % 2) + 1}`,
      username: ['student', 'zoudexiang', 'anshubin112321321', 'wangrui'][i % 4],
      score: `${Math.floor(Math.random() * 3) * 10}/${(i % 2) ? 20 : 10}`,
      correctQuestions: `${Math.floor(Math.random() * 3)}/${(i % 2) ? 2 : 1}`,
      duration: `${Math.floor(Math.random() * 40) + 1}秒`,
      submitTime: new Date(Date.now() - i * 86400000).toLocaleString()
    }))
  }

  return new Promise<GetExamPapersResult>((resolve) => {
    setTimeout(() => {
      const dataBySubject = mockData[params.subject] || []
      const start = (params.pageIndex - 1) * params.pageSize
      const end = start + params.pageSize
      resolve({
        data: {
          list: dataBySubject.slice(start, end),
          total: dataBySubject.length
        }
      })
    }, 500)
  })
}

const handleSizeChange = (val: number) => {
  query.value.pageSize = val
  fetchData()
}

const handleCurrentChange = (val: number) => {
  query.value.pageIndex = val
  fetchData()
}

onMounted(() => {
  query.value.subject = 'chinese'
  fetchData()
})
</script>

<style scoped>
.pagination {
  margin-top: 20px;
}
</style>